<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>07个人简历练习</title>
    </head>
    <body>
      <table border="1px">
        <caption>个人简介</caption>
        <tr>
          <td>照片:</td>
          <td id="pic_td"></td>
        </tr>
        <tr>
          <td>姓名:</td>
          <td id="name_td"></td>
        </tr>
        <tr>
          <td>年龄:</td>
          <td id="age_td"></td>
        </tr>
        <tr>
          <td>好友：</td>
          <td id="friends_td"></td>
        </tr>
      </table>

      <script>
        let person = {
          name :'传奇哥',
          age:18,
          friends:['小明','小哥','小红'],
          imgUrl:'img/fcq.jpg'
        };
        //根据id依次获取四个单元格元素
        let picTd = document.getElementById('pic_td');
        let nameTd= document.getElementById('name_td');
        let ageTd = document.getElementById('age_td');
        let friendTd = document.getElementById('friends_td');
        //将对象的指定属性装入到单元格中
        nameTd.innerHTML=person.name;
        ageTd.innerHTML=person.age;
        //需要创建一个图片对象
        let  imgE = document.createElement('img');
        imgE.src = person.imgUrl;
        imgE.width=100;
        //注意：需要把图片元素放入对应的单元格中，不能用innerHTML
        picTd.append(imgE);
        //页面没有无序列表，需要创建
        let ulE = document.createElement('ul');
        //遍历好友数组，有几位好友，ul中就有几个li
        for(let i=0;i<person.friends.length;i++){
          //遍历几次，就生成几个li
          let liE = document.createElement('li');
          //将本轮遍历到的好友名字方入到li中
          liE.innerHTML = person.friends[i];
          //将li放入到ul中
          ulE.append(liE)
        }
        //将ul放入好友单元格中
        friendTd.append(ulE);





      </script>

    </body>
</html>